<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Awesome-pyecharts</title>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/echarts.min.js"></script>
    <script type="text/javascript" src="https://assets.pyecharts.org/assets/maps/shanghai.js"></script>

</head>

<body>
    <div id="8eb6b7c02f4b46fda4d9461e83391ac3" class="chart-container" style="width:800px; height:600px;margin:auto;top:30px"></div>
    <script>
        var chart_8eb6b7c02f4b46fda4d9461e83391ac3 = echarts.init(
            document.getElementById('8eb6b7c02f4b46fda4d9461e83391ac3'), 'white', {
                renderer: 'canvas'
            });
        var option_8eb6b7c02f4b46fda4d9461e83391ac3 = {
            "animation": true,
            "animationThreshold": 2000,
            "animationDuration": 1000,
            "animationEasing": "cubicOut",
            "animationDelay": 0,
            "animationDurationUpdate": 300,
            "animationEasingUpdate": "cubicOut",
            "animationDelayUpdate": 0,
            "color": [
                "#c23531",
                "#2f4554",
                "#61a0a8",
                "#d48265",
                "#749f83",
                "#ca8622",
                "#bda29a",
                "#6e7074",
                "#546570",
                "#c4ccd3",
                "#f05b72",
                "#ef5b9c",
                "#f47920",
                "#905a3d",
                "#fab27b",
                "#2a5caa",
                "#444693",
                "#726930",
                "#b2d235",
                "#6d8346",
                "#ac6767",
                "#1d953f",
                "#6950a1",
                "#918597"
            ],
            "series": [{
                "type": "map",
                "name": "\u4e2a\u4eba\u8db3\u8ff9\u5730\u56fe-\u4e0a\u6d77",
                "label": {
                    "show": true,
                    "position": "top",
                    "margin": 8
                },
                "mapType": "\u4e0a\u6d77",
                "data": [{
                    "name": "\u4e0a\u6d77\u5e02",
                    "value": 1
                }],
                "roam": true,
                "zoom": 1,
                "showLegendSymbol": true,
                "emphasis": {}
            }],
            "legend": [{
                "data": [
                    "\u4e2a\u4eba\u8db3\u8ff9\u5730\u56fe-\u4e0a\u6d77"
                ],
                "selected": {
                    "\u4e2a\u4eba\u8db3\u8ff9\u5730\u56fe-\u4e0a\u6d77": true
                },
                "show": true,
                "padding": 5,
                "itemGap": 10,
                "itemWidth": 25,
                "itemHeight": 14
            }],
            "tooltip": {
                "show": true,
                "trigger": "item",
                "triggerOn": "mousemove|click",
                "axisPointer": {
                    "type": "line"
                },
                "textStyle": {
                    "fontSize": 14
                },
                "borderWidth": 0
            },
            "title": [{
                "text": "\u4e2a\u4eba\u8db3\u8ff9\u5730\u56fe-\u4e0a\u6d77",
                "padding": 5,
                "itemGap": 10
            }],
            "visualMap": {
                "show": true,
                "type": "piecewise",
                "min": 0,
                "max": 1,
                "inRange": {
                    "color": [
                        "#50a3ba",
                        "#eac763",
                        "#d94e5d"
                    ]
                },
                "calculable": true,
                "inverse": false,
                "splitNumber": 5,
                "orient": "vertical",
                "showLabel": true,
                "itemWidth": 20,
                "itemHeight": 14,
                "borderWidth": 0,
                "pieces": [{
                    "max": 1,
                    "min": 1,
                    "label": "\u53bb\u8fc7",
                    "color": "#4EA397"
                }, {
                    "max": 0,
                    "min": 0,
                    "label": "\u672a\u53bb\u8fc7",
                    "color": "#FFFFFF"
                }]
            }
        };
        chart_8eb6b7c02f4b46fda4d9461e83391ac3.setOption(option_8eb6b7c02f4b46fda4d9461e83391ac3);
    </script>
</body>

</html>